<template>
	<view class="padding-lr32" :key="refreshKey">
		<!-- <view>
			<view class="ts">
			<span>*</span><text>请仔细填写银行卡信息.绑定后,如需解绑或换卡,需要联系客服</text>
		</view>
		<view class="form">
			<view class="from-item">
				<view class="form-lable">
					持卡人
				</view>
				<view class="form-input">
					<text>{{realName}}</text>
				</view>
			</view>
			<view class="from-item">
				<view class="form-lable">
					卡号
				</view>
				<view class="form-input">
					<text v-if="boundFlag">{{cardNumber}}</text>
					<input v-else type="text" placeholder="请输入卡号" v-model="cardNumber">
				</view>
			</view>
			<view class="from-item">
				<view class="form-lable">
					开户银行
				</view>
				<view class="form-input">
					<text v-if="boundFlag">{{bankName}}</text>
					<input v-else type="text" placeholder="请输入开户银行" v-model="bankName">
				</view>
			</view>
			<view class="from-item">
				<view class="form-lable">
					开户银行地址
				</view>
				<view class="form-input">
					<text v-if="boundFlag">{{bankAddress}}</text>
					<input v-else type="text" placeholder="请输入开户银行地址" v-model="bankAddress">
				</view>
			</view>
		</view>
		<button class="submit" v-if="boundFlag">已绑定</button>
		<button class="submit1" @click="bindBankCard" v-show="!boundFlag">绑定</button>
		</view>
		 -->
        <view class="hand">
			<view class="title"> 绑定TRC提现信息</view> 
			<view><uv-icon name="scan" size="28" @click="scanCode"></uv-icon></view> 
		</view>
		<view class="content animate__fadeInUp" style="animation-duration: 2s;">
			<input  type="text" placeholder="请输入提现地址" v-model="walletAddress">
			<input  type="text" placeholder="请输入唯一16位密钥" v-model="secretKey">
		</view>
		<view class="pay-btn">
			<view class="fixed-bottom-inner">
				<button class="exchange-btn" @click="bind">{{boundFlag ? '已绑定' : '确认保存'}}</button> 
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				realName : '',
				cardNumber: '',
				secretKey: '',
				boundFlag: false,
				walletAddress: '',
				refreshKey:0
			}
		},
		onLoad() {
			this.getMemberInfo();
		},
		onShow(){
			this.refreshKey += 1;
		},
		methods: {
			
			scanCode() {
				var that = this;
				// #ifdef  APP-PLUS
				uni.scanCode({
					scanType: ['qrCode'],
					success: function(res) {
						that.bankAddress = res.result;
					},
					fail: function(res) {
						uni.showToast({
							title: "扫码失败",
							icon: "none"
						});
					}
				});
				// #endif
				// #ifdef  H5
				uni.showToast({
					title: "请打开APP扫码",
					icon: "none"
				});
				return;
				// #endif
			},

			getMemberInfo() {
				var that = this;
				uni.$uv.http.get('/member/getMemberInfo').then(res => {
					var accountInfo = res.data;
					if (accountInfo.walletAddress) {
						that.boundFlag = true;
						that.walletAddress = accountInfo.walletAddress;
					}
				});
			},

			bind: function() {
				var that = this;
				if (that.boundFlag) {
					uni.showToast({
						title: "你已绑定提现地址",
						icon: "none"
					});
					return;
				}
				if (that.walletAddress == null || that.walletAddress == '') {
					uni.showToast({
						title: "请输入提现地址",
						icon: "none"
					});
					return;
				}
				if (that.secretKey == null || that.secretKey == '') {
					uni.showToast({
						title: "请输入16位密钥",
						icon: "none"
					});
					return;
				}
				uni.$uv.http.post('/member/modifyWalletAddress', {
					walletAddress: that.walletAddress,
					secretKey : that.secretKey,
				}).then(res => {
					uni.showToast({
						icon: 'success',
						title: '操作成功!',
						duration: 2000,
						complete: function() {
							setTimeout(() => {
								uni.navigateBack();
							}, 2000);
						}
					});
				});
			},
		}
	}
</script>


<style scoped lang="less">
page {
	height: auto !important;
	background: url('/static/img/my_bg.png') no-repeat;
	background-size: 100% 100%;
	background-color: #FFFFFF;
}
	.pay-btn {
		padding: 0px 40rpx;
		position: fixed;
		bottom: 60rpx;
		left: 0;
		right: 0;
	
	}
	
	.fixed-bottom-inner {
		padding: 0px 40rpx;
	}
	.exchange-btn{
		    margin-top: 48rpx;
			color: #0B1327;
			font-weight: 900;
			font-size: 28rpx;
			height: 100rpx;
			line-height:100rpx;
			background: #FEE19E;
		    border-radius: 50rpx;
		}
	.padding-lr32 {
		padding: 0px;
	}
	.hand{
	   display: flex;
	   align-items: center;
	   justify-content: space-between;
	   padding: 32rpx 32rpx;
	  
	}
	.content{
	   input{
	  	padding: 32rpx;
	    background: #FFF;
	    border-radius: 20rpx;
	    margin: 32rpx;
	   }
	 
	}



	.ts {
		background: #f0fafe;
		font-size: 24rpx;
		height: 64rpx;
		line-height: 64rpx;
		padding-left: 24rpx;
		color: rgb(6, 7, 12);
	}

	.submit {
		// background: linear-gradient(to right, rgb(32, 160, 214), rgb(19, 123, 189));
		background: #fff;
		color: #999;
		border: 0px;
		border-radius: 98rpx;
		height: 98rpx;
		width: 100%;
		display: block;
		margin: 0px auto;
		line-height: 98rpx;
		padding: 0px;
		width: 670rpx;
		margin-top: 80rpx;
		font-weight: bold;
		// box-shadow: 5px 5px 5px rgba(226, 242, 250, 1);

		&::after {
			border: 0px solid #fff;
		}
	}

	.submit1 {
		background: linear-gradient(to right, rgb(32, 160, 214), rgb(19, 123, 189));
		// background: #fff;'
		color: #fff;
		border: 0px;
		border-radius: 98rpx;
		height: 98rpx;
		width: 100%;
		display: block;
		margin: 0px auto;
		line-height: 98rpx;
		padding: 0px;
		width: 670rpx;
		// box-shadow: 5px 5px 5px rgba(226, 242, 250, 1);
		margin-top: 80rpx;

		&::after {
			border: 0px solid #fff;
		}
	}


	.form {
		padding: 0px 40rpx;
		box-sizing: border-box;

		.form-lable {
			color: rgb(153, 153, 153);
		}

		.from-item {
			display: flex;
			height: 103rpx;
			background: #fff;
			margin-top: 24rpx;
			border-radius: 20rpx;
			align-items: center;
			padding: 0px 32rpx;

		}

		.form-input {
			text-align: right;
			flex-grow: 1;
			display: flex;
			justify-content: right;

			text {
				color: rgb(27, 127, 180);
			}
		}

		input {
			text-align: right;
			flex-grow: 1;
			color: rgb(27, 127, 180);
		}
	}

	/deep/ .uv-radio-group {
		justify-content: right;
	}
</style>